<script setup>
import { reactive, ref } from "vue";
// 路由跳转
import { useRouter } from 'vue-router'
const router = useRouter();

const ruleFormRef = ref("");
// 数据绑定
const formRegInfo = reactive({
    name: "",
    email: "",
    pass: "",
    checkPass: "",
});
// 规则检查
const validatePass = (rule, value, callback) => {
    if (value === "") {
        callback(new Error("Please input the password"));
    } else {
        if (formRegInfo.checkPass !== "") {
            if (!ruleFormRef.value) return;
            ruleFormRef.value.validateField("checkPass", () => null);
        }
        callback();
    }
};

const validatePass2 = (rule, value, callback) => {
    if (value === "") {
        callback(new Error("Please input the password again"));
    } else if (value !== formRegInfo.pass) {
        callback(new Error("Two inputs don't match!"));
    } else {
        callback();
    }
};

const rules = reactive({
    pass: [{ validator: validatePass, trigger: "blur" }],
    checkPass: [{ validator: validatePass2, trigger: "blur" }],
});
// 提交数据
const submitForm = async (formEl) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            // console.log(formRegInfo.name,formRegInfo.pass,formRegInfo.email)
            fetch("http://localhost/test-7/pixiv-register.php", {
                method: "POST", // or 'PUT'
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({
                    name: formRegInfo.name,
                    email: formRegInfo.email,
                    passwd: formRegInfo.pass,
                }),
            })
                .then((response) => response.json())
                .then((data) => {
                    console.log("Success:", data);
                    if (data.status == 1) {
                        // 路由跳转
                       router.push('/login');
                    }
                })
                .catch((error) => {
                    console.error("Error:", error);
                });
        } else {
            console.log("error submit!", fields);
        }
    });
};
// 清空密码和确认密码
const resetForm = (formEl) => {
    if (!formEl) return;
    formEl.resetFields();
};
</script>

<template>
    <header id="login-bg">
        <el-main>
            <el-row class="row-bg login-w-m" align>
                <el-col>
                    <div id="login-header">
                        <ul>
                            <li><a>CNPixiv</a></li>
                            <li>让你的创作被每个人看到</li>
                            <li>
                                <h2>注册平台</h2>
                            </li>
                        </ul>
                    </div>
                </el-col>
                <el-col>
                    <div id="login-main">
                        <el-form ref="ruleFormRef" :model="formRegInfo" status-icon :rules="rules">
                            <el-form-item>
                                <el-input v-model="formRegInfo.name" placeholder="用户名" type="text" />
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="formRegInfo.email" placeholder="邮箱" type="email" />
                            </el-form-item>
                            <el-form-item prop="pass">
                                <el-input v-model="formRegInfo.pass" placeholder="密码" type="password"
                                    autocomplete="off" />
                            </el-form-item>
                            <el-form-item prop="checkPass">
                                <el-input v-model="formRegInfo.checkPass" placeholder="再次输入密码" type="password"
                                    autocomplete="off" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                                <el-button @click="resetForm(ruleFormRef)">密码重输</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
            </el-row>
        </el-main>
    </header>
</template>

<style scoped>
#login-bg {
    height: 700px;
    background-image: url("https://vilipix.oss-cn-beijing.aliyuncs.com/web/login/wallper-02.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: right;
}

.login-w-m {
    width: 320px;
    margin: 15vh auto 0 auto;
    padding: 15px;
    background-color: hsla(0, 0%, 100%, 0.9);
}

#login-header {
    text-align: center;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul>li:nth-child(1) {
    font-size: 50px;
    font-weight: bold;
    font-style: oblique;
    color: #0096fa;
}

ul>li:nth-child(2) {
    font-weight: bold;
    font-size: 14px;
    color: #757c80;
}

ul li>h2 {
    color: #757c80;
}
</style>
